<template>
	<view class="box">
		<view class="sticky">
			<view :style="{height: navheight}"></view>
			<view class="topnav" :style="{height: topheight}">
				<view class="home" @tap="home()">
					<van-icon name="wap-home-o" />
				</view>

				<view class="searchbox">
					<view class="inp">
						<view class="i_box">
							<view class="i_box">
								<view class="i1">
									<van-icon name="search" />
								</view>
								<view class="text">
									<text>搜索</text>
								</view>
							</view>
						</view>
					</view>
				</view>




			</view>

			<view class="location">
				<view class="tip1">
					<text>泉州经贸职业技术学院</text>
					<view class="location_i">
						<van-icon name="arrow" />
					</view>
				</view>

				<view class="distance">
					<view class="distance_i">
						<van-icon name="location-o" />
					</view>
					<view class="distance_p">
						距离您76m
					</view>

					<view class="tip2">
						<view class="tip2_i">
							<van-icon name="comment-circle" />
						</view>
						<view class="tip2_p">
							<view class="p">
								非会员单笔买满十杯,送一杯,详情请见订购须知。
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="sticky1">

		</view>




		<view class="select" v-show="state">
			<scroll-view :scroll-y="true" class="select_left" scroll-into-view="">
				<view class="left_menu" v-for="(val,index) in leftmenu" :key="val.id" @click="leftmenuhandle(val.id,)"
					:id="val.id==num ? 'line' : ''">
					<view class="imgbox">
						<image :src="val.url" mode="" class="img"></image>
					</view>
					<view :class="val.id==num ? 'tipbox1' : 'tipbox'">
						{{val.tip}}
					</view>
				</view>

			</scroll-view>

			<scroll-view :scroll-y="true" class="select_right" :scroll-into-view="rightmenuid"
				scroll-with-animation="true" @scroll="rightmove">
				<view class="one" v-for="(val,index) in shoppingData" :key="val.id" :id="'goods'+(index+1)">
					<view class="textbox" id="test1">
						<text>{{val.name}}</text>
					</view>
					<view class="onebox" v-for="(val1,index) in val.products" @tap="lefthandle(val1)">
						<view class="right_img_box">
							<image :src="val1.images[0].url" mode="">
							</image>
						</view>

						<view class="right_tip_box">
							<view class="right_tip_box1">
								<view class="tip1">
									<text>{{val1.name}}</text>
								</view>
								<view class="tip2">
									{{val1.description}}
								</view>
								<view class="price">
									<text>¥ {{val1.price}}</text>
									<text> 元</text>
									<view class="addgoods" @tap.stop.prevent="addgoods(val1)">
										<image src="../../static/images/orderfoot/add.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<popu></popu>
		<goods></goods>
		<shopping></shopping>

	</view>
</template>

<script>
	import popu from "./components/popu.vue"
	import goods from "./components/goods.vue"
	import shopping from "./components/shopping.vue"
	import { mapState,mapMutations } from "vuex"
	export default {
		components: {
			popu,
			goods,
			shopping
		},
		data() {
			return {
				navheight: '',
				topheight: '',
				rightmenuid: 'goods1',
				num: 0,
				leftdata: [],
				leftmenu: [{
					id: 1,
					url: 'https://go.cdn.heytea.com/storage/category/2020/04/23/3b52e3d18fae4290b0a668a776b21645.jpg'
				}],

				right: [],
				state: false,


			}
		},
		mounted() {
			//获取状态栏高度
			this.navheight = uni.getMenuButtonBoundingClientRect().top + 'px'
			this.topheight = (uni.getMenuButtonBoundingClientRect().height + 10) + 'px'
			
			
			//定位判断,无定位权限则跳转授权页面
			let that = this
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					//获取商品数据
					that.initShoppingData()
				},
				fail: (err) => {
					//重定向授权页面
					uni.redirectTo({
						url:'../location/location'
					})
				}
			});
			
			
		},
		methods: {
			...mapMutations(['initShopping']),
			//获取商品数据
			initShoppingData() {
				
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				
				//菜单栏图标
				this.getdb().collection('icon').get()
				.then((data) => {
					this.leftmenu = data.data
				
				})
				
				this.getdb().collection('commodity').get()
				.then((data) => {
					//提交给vuex管理购物车数据
					this.initShopping(data.data)
					this.leftdata = this.shoppingData
					uni.hideLoading()
					this.state = true
				}).catch((err) =>{
					uni.hideLoading()
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					})
				})
			},
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			leftmenuhandle(e) {
				this.num = e
				this.rightmenuid = 'goods' + e
			},
			rightmove(e) {

			},
			lefthandle(e) {
				//蒙版隐藏显示
				this.$store.state.popustatus = !(this.$store.state.popustatus)
				this.$bus.$emit('test', e)
			},
			//添加商品到购物车
			addgoods(e) {
				console.log(e)
				this.$bus.$emit('addgoods', e)
			}
		},
		onShow() {
			
		},
		computed: {
			...mapState(['shoppingData']),
			state() {
				return this.$store.state.popustatus
			}
		}

	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.sticky {
		width: 100%;
		height: 400rpx;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99;
	}

	.sticky1 {
		width: 100%;
		height: 400rpx;
	}

	.topnav {
		width: 100%;
		position: relative;
	}

	.topnav .home {
		font-size: 1.5rem;
		position: absolute;
		left: 20rpx;
	}

	.topnav .searchbox {
		height: 32px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.topnav .inp {
		width: 350rpx;
		height: 100%;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		position: relative;
	}

	.topnav .inp .i_box {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.topnav .i_box .i1 {
		height: 100%;
		float: left;
		font-size: 1.35rem;
		margin-top: 5rpx;
	}

	.topnav .i_box .text {
		height: 100%;
		float: left;
		position: relative;
	}

	.i_box .text text {
		width: 100rpx;
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
</style>

<style scoped>
	.location {
		width: 100%;
		height: 200rpx;
		background-color: #FFFFFF;
	}

	.location .tip1 {
		width: 100%;
		height: 50rpx;
		background-color: #FFFFFF;
	}

	.location text {
		line-height: 50rpx;
		display: inline-block;
		font-size: 1.1rem;
		font-weight: 700;
		margin-left: 20rpx;
	}

	.location .location_i {
		line-height: 50rpx;
		display: inline-block;
	}

	.distance .distance_i {
		display: inline-block;
		margin: 20rpx;
		color: #9b9b9b;
	}

	.distance .distance_p {
		display: inline-block;
		font-size: 0.8rem;
		color: #9b9b9b;
	}

	.tip2 {
		width: 100%;
		height: 40rpx;

	}

	.tip2 .tip2_i {
		line-height: 40rpx;
		float: left;
		font-size: 1.1rem;
		color: #F0AD4E;
		margin-left: 20rpx;
	}

	.tip2 .tip2_p {
		height: 40rpx;
		float: left;

	}

	.tip2 .tip2_p .p {
		line-height: 40rpx;
		font-size: 0.8rem;
		color: #9b9b9b;
		margin-left: 30rpx;
	}
</style>

<style scoped>
	.select {
		width: 100%;
		height: 75%;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.select_left {
		width: 20%;
		height: 100%;
		float: left;
		background-color: #f1f1f1;
	}

	.select_right {
		width: 80%;
		height: 100%;
		float: left;
	}

	.select_right .textbox {
		width: 100%;
		line-height: 50rpx;
		color: #5d5d5d;
		font-size: 0.8rem;
		margin-top: 0rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
	}

	.left_menu {
		width: 100%;
		height: 120rpx;
		padding: 20rpx 0;
		background-color: #f1f1f1;
		position: relative;
		/* border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx; */
	}

	.left_menu:nth-child(1) {
		margin-top: 0;
	}

	.left_menu .imgbox {
		width: 60%;
		height: 50%;
		text-align: center;
		position: relative;
		margin: 0 auto;
	}

	.left_menu image {
		width: 50%;
		height: 100%;
		margin-top: 20rpx;
	}

	.left_menu .tipbox1 {
		width: 100%;
		height: 50%;
		text-align: center;
		position: relative;
		margin-top: 30rpx;
		color: #037a62;
		font-size: 0.75rem;
	}

	.left_menu .tipbox {
		width: 100%;
		height: 50%;
		text-align: center;
		position: relative;
		margin-top: 30rpx;
		color: #5e605f;
		font-size: 0.75rem;
	}

	#line {
		background-color: #FFFFFF;
		border-left: 8rpx solid #037a62;
		/* border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx; */
	}
</style>

<style scoped>
	.onebox {
		width: 100%;
		height: 200rpx;
		background-color: #55aaff;
	}

	.right_img_box {
		width: 35%;
		height: 100%;
		float: left;
		background-color: #FFFFFF;
		position: relative;
	}

	.right_img_box image {
		width: 60%;
		height: 60%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.right_tip_box {
		width: 65%;
		height: 100%;
		float: left;
		background-color: #ffffff;
	}

	.right_tip_box1 {
		width: 90%;
		height: 100%;
		margin: 0 auto;
	}

	.right_tip_box .tip1 {
		font-size: 0.9rem;
		font-weight: 700;
		margin: 20rpx 0 10rpx 0;
	}

	.right_tip_box .tip2 {
		width: 100%;
		height: auto;
		margin: 0 auto;
		color: #979797;
		font-size: 0.7rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;


	}

	.right_tip_box .price {
		font-size: 0.85rem;
		font-weight: 700;
		margin-top: 10rpx;
		color: #DD524D;
	}

	.right_tip_box .price text:nth-child(2) {
		font-size: 0.7rem;
		margin-left: 10rpx;
	}

	.right_tip_box .addgoods {
		float: right;
	}

	.right_tip_box .addgoods image {
		width: 35rpx;
		height: 35rpx;
	}
</style>
